<template>
  <common-dialog :dialog-title="!edit ? '新建属性' : '编辑属性'" :visible.sync="visible"
                 :before-close="handleBeforeClose" v-draggable>

    <template #body>
      <el-form :model="itemInfoForm" label-width="100px" ref="form" size="medium" class="model-definition-form">
        <el-form-item label="属性名称："
                      prop="name"
                      :rules="[
                { required: true, message: '属性名称不能为空'},
              ]"
        >
          <el-input v-model="itemInfoForm.name" autocomplete="off" placeholder="请输属性名称" class="custom-input"></el-input>
        </el-form-item>

        <el-form-item label="属性编号："
            prop="code"
            :rules="[
                { required: true, message: '属性编号不能为空'},
              ]">
          <el-input v-model="itemInfoForm.code" autocomplete="off" placeholder="请输入属性编号" class="custom-input" :readonly="edit"></el-input>
        </el-form-item>

        <el-form-item label="图标类型：" prop="iconType">
          <el-select v-model="itemInfoForm.iconType" placeholder="请选择图标类型" @change="changeSelectedIcon">
            <el-option label="" value=""></el-option>
            <el-option label="element-ui" value="element-ui"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图标：" prop="icon">
          <el-input v-model="itemInfoForm.icon" autocomplete="off" placeholder="图标" class="custom-input" v-if="iconType !== 'element-ui'"></el-input>
          <div v-else class="icon-wrap">
            <el-input :prefix-icon="itemInfoForm.icon ? itemInfoForm.icon : undefined" v-model="itemInfoForm.icon" autocomplete="off" placeholder="图标" class="custom-input icon-input" :readonly="true"></el-input>
            <el-button type="primary" size="medium" class="icon-btn" @click="openIconDialog">选择</el-button>
          </div>
        </el-form-item>

        <el-form-item
          label="是否私有："
          prop="privateAttr"
          :rules="[
                { required: true, message: '请选择'},
          ]"
        >
          <el-radio-group v-model="itemInfoForm.privateAttr" :disabled="itemInfoForm.published">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false" checked>否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="类型："
          prop="dataType"
          :rules="[
                { required: true, message: '请选择类型'},
          ]"
        >
          <el-select v-model="itemInfoForm.dataType" clearable placeholder="请选择类型" :disabled="itemInfoForm.published">
            <el-option
              v-for="item in dataTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="itemInfoForm.attrType === 'HARD_ATTR'"
          label="长度："
          prop="dataLength"
        >
          <el-input v-model.number="itemInfoForm.dataLength" autocomplete="off" class="custom-input"
            readonly></el-input>
        </el-form-item>

        <el-form-item
            label="排序号："
            prop="weight"
            :rules="[{required: false, type: 'number', message: '排序号必须为数字值'}]"
        >
          <el-input v-model.number="itemInfoForm.weight" autocomplete="off" class="custom-input" ></el-input>
        </el-form-item>

        <el-form-item
          label="是否保存副本："
          v-if="!edit">
          <el-radio-group v-model="attrClone">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <icon-dialog :visible="showSelectIconDialog" v-if="showSelectIconDialog" @selectIcon="selectIcon"
        @removed="selectIcon"></icon-dialog>

    </template>

    <template #footer>
      <div class="dialog-footer" style="padding-right: 20%;">
        <el-button @click="closeDialog(false)" :disabled="disabled">取 消</el-button>
        <el-button type="primary" @click="saveAndEdit" :disabled="disabled">保存</el-button>
        <el-button type="info" @click="resetForm($refs.form)" :disabled="disabled">重置</el-button>
      </div>
    </template>
  </common-dialog>
</template>

<script>

import CommonDialog from '@/components/common/CommonDialog'
import FormMixins from '@/components/mixins/form/FormMixins'
import IconDialog from '@/components/common/IconDialog'
import {getDataTypeOptions, saveAndUpdateModelAttr} from '@/js/api/model/modelAttr'

export default {
  name: 'ModelAttrForm',
  components: {
    IconDialog,
    CommonDialog
  },
  mixins: [FormMixins],
  props: {
    edit: {
      default: false,
      type: Boolean
    },
    itemInfo: {
      default: () => {
        return {}
      },
      type: Object
    },
    defaultWeight: {
      default: 0,
      type: Number
    },
    modelInfo: {
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data(){
    return {
      disabled: false,
      itemInfoForm: {},
      iconType: '',
      showSelectIconDialog: false,
      dataTypeOptions: [],
      attrClone: false
    }
  },
  methods: {
    async getDataTypeOptions(){
      const response = await getDataTypeOptions()
      if (response.errorMsg){
        this.$msgAlert(response.errorMsg, 'error')
      } else {
        this.dataTypeOptions = response.data
      }
    },
    saveAndEdit(){
      const canSave = this.validateForm(this.$refs.form)
      if (canSave){
        this.itemInfoForm.parentId = this.parentId
        this._save()
      } else {
        this.$msgAlert('请按要求填好表格数据后，再提交！', 'error')
      }
    },
    async _save(){
      this.itemInfoForm.modelId = this.modelInfo.id
      const response = await saveAndUpdateModelAttr(this.itemInfoForm, !this.edit, this.attrClone)
      if (response.errorMsg){
        this.$msgAlert(response.errorMsg, 'error')
      } else {
        if (!this.edit){
          this.itemInfoForm = response.data
        }
        this.$tips(this.edit ? '编辑成功' : '新建成功')
        this.$emit('updateTable', this.itemInfoForm)
        this.closeDialog(false)
      }
    },
    changeSelectedIcon(value){
      this.iconType = value
    },
    openIconDialog(){
      this.showSelectIconDialog = true
    },
    selectIcon(icon){
      if (icon){
        this.itemInfoForm.icon = icon
      }
      this.showSelectIconDialog = false
    }
  },
  created(){
    if (this.edit){
      this.itemInfoForm = {...this.itemInfo}
    } else {
      this.$set(this.itemInfoForm, 'weight', this.defaultWeight)
      this.$set(this.itemInfoForm, 'privateAttr', false)
    }
    this.iconType = this.itemInfoForm.iconType
    this.getDataTypeOptions()
  }
}
</script>

<style lang="less">
  .el-dialog__body{
    .model-definition-form{
      .custom-input{
        .el-input__inner{
          width: 60%;
        }
        .el-textarea__inner{
          width: 60%;
          resize: none;
        }
        .el-input__count{
          left: 60%;
        }
      }
      .el-select--medium{
        width: 60%;
      }
      .el-form-item{
        >.el-form-item__label{
          width: 115px !important;
        }
        >.el-form-item__content{
          margin-left: 115px !important;
          .icon-wrap{
            width: 60%;
            display: flex;
            .icon-input{
              .el-input__inner{
                width: 100%;
                flex: 1;
              }
            }
            .icon-btn{
              flex-shrink: 0;
            }
          }
        }
      }
    }
  }
</style>
